<template>
    <div class="l-container">
        <div style="height:100px;background:#ccc;" v-if="creating"></div>
        <Spin fix v-if="loading"></Spin>
        <Timeline class="margin-top-30 padding-left-20">
            <TimelineItem :key="item.id" v-for="item in history">
                <p>
                    <b>{{item.created_at | date('YYYY-MM-DD HH:mm')}}</b>
                </p>
                <p>
                    [{{item.from_role | roleType}}]
                    {{item.from_name}}，
                    <span>{{item.type | opreateType}}</span>
                </p>
                <p v-if="item.to_name">
                    给
                    [{{item.to_role | roleType}}]
                    {{item.to_name}}
                </p>
                <p v-show="item.description">原因：{{item.description}}</p>
            </TimelineItem>
        </Timeline>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'

export default {
  name: 'ticket-detail-operate-log',
  props: {
    ticket: Object,
    loaded: Boolean
  },
  data () {
    return {
      creating: true,
      loading: false,
      history: []
    }
  },
  created () {
    this.fetchLog()
  },
  methods: {
    async fetchLog () {
      try {
        this.loading = true
        const res = await http.fetch(this, api.ticket_history, [this.ticket.id], null)
        if (res) this.history = res
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
        this.creating = false
      }
    }
  },
  filters: {
    opreateType (type) {
      return {
        1: '创建工单',
        2: '指派工单',
        3: '指派工单',
        4: '提交工单',
        5: '工单已通过验收',
        6: '取消工单',
        7: '转交客服',
        8: '确定上门时间',
        9: '对工单进行了修改',
        10: '驳回工单验收',
        11: '进行签到',
        12: '受理工单'
      }[+type]
    },
    roleType (id) {
      return (
        {
          0: '系统',
          1: '超级管理员',
          2: '系统管理员',
          3: '运营',
          4: '商务负责人',
          5: '中区负责人',
          6: '商务',
          7: '服务负责人',
          8: '服务工程师',
          9: '技术支持',
          10: '客服',
          11: '财务(后台)',
          12: '交付管理员',
          13: '调度',
          14: '师傅'
        }[+id] || '客户'
      )
    }
  }
}
</script>